feat: Style macro devtool #8305
Conversation
# Conflicts: # yarn.lock
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
changed the title
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
force-pushed
the
style-macro-devtool
branch
from
994911b to
2706cd1
Compare
|
Build successful! 🎉 |
# Conflicts: # package.json # packages/@react-spectrum/s2/style/__tests__/style-macro.test.js # packages/@react-spectrum/s2/style/style-macro.ts # packages/dev/parcel-config-storybook/package.json # packages/dev/s2-icon-builder/package.json # yarn.lock
|
Build successful! 🎉 |
|
Build successful! 🎉 |
differentiate between hash conflicts when same style is used in multiple files
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
reidbarber
left a comment
reidbarber
left a comment
There was a problem hiding this comment.
Nice! Tested in our storybook.
yihuiliao
left a comment
yihuiliao
left a comment
There was a problem hiding this comment.
tested on the s2 storybook, i like the logo haha
| // the defaults from the style definition are omitted. | ||
| let allowedOverridesSet = new Set<string>(); | ||
| let js = 'let rules = " ";\n'; | ||
| let js = 'let rules = " ", currentRules = {};\n'; |
There was a problem hiding this comment.
only needed in dev builds right?
There was a problem hiding this comment.
yeah, i was struggling with how to do that, can try again monday
| this.pseudos = ''; | ||
| this.property = property; | ||
| this.value = value; | ||
| if (isCompilingDependencies !== null) { |
There was a problem hiding this comment.
Remind me what this is for? Why is it only when compiling dependencies?
There was a problem hiding this comment.
to be perfectly honest, I have no idea, this was part of the code i copied over from your work
it seems to have something to do with self() references, but I don't follow the logic at line 285 where it progresses from a dependency name, to null, to false.
given that it has to do with self() though, i'm guessing this allows us to go past that as a value to display and go to the compiled value?
| copy(): Rule | ||
| } | ||
|
|
||
| let conditionStack: string[] = []; |
There was a problem hiding this comment.
Perhaps at some point we can refactor this to not rely on global state
snowystinger
dismissed stale reviews from devongovett, yihuiliao, and reidbarber
via
4c1fd62
|
Build successful! 🎉 |
|
Build successful! 🎉 |
Closes
Follow instructions in README to run the plugin. There is also a description of the extension architecture in there as it is non-trivial due to the various sandbox that chrome imposes in addition to the different ways that a macro could be updated ie. static, dynamic, conditional static.
Note, there is a parcel bug which will cause all tabs that have had the content script injected to reload on every change. I cannot resolve this right now. If you build instead so that the extension doesn't change, then it won't do this. It's only during HMR. This will also cause every tab to refresh if a tab that had loaded the extension is closed.
For this reason, it can be easier to build the extension instead of running it as if you're developing.
Some notes, this is currently meant to be used in addition to the regular panels and AtomicCSS to determine where styles are coming from. It is not designed to replace those extensions and inspectors.
✅ Pull Request Checklist:
📝 Test Instructions:
I added a style macro in the commit e5ab27b which is static and is swapped with another static one on a span inside buttons. It reacts to the button being focused. You can see the extensions dev panel is updated when this swap occurs despite it being a static macro.
I removed that afterwards. So to test the updates on static macros, use that storybook build.
Otherwise, you can inspect elements and view the results in the dev tools panel.
🧢 Your Project: